<template>
  <div>
    <h1>测试数据更新获取dom</h1>

    <p ref="text">我是数据 {{ show }}</p>
    <button @click="fn">点击修改</button>
    {{ uname }}
    <!-- <div class="mainBox">
      <div
        style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block;vertical-align:bottom"
        class="ctrlProcessWave"
      ></div>
      <div
        style="height:40px;width:300px;display:inline-block;background:#999;position:relative;vertical-align:bottom"
      >
        <div
          class="ctrlProcessX"
          style="height:40px;background:#0B1;position:absolute;"
          :style="{ width: powerLevel + '%' }"
        ></div>
        <div
          class="ctrlProcessT"
          style="padding-left:50px; line-height:40px; position: relative;"
        >
          {{ duration + '/' + powerLevel }}
        </div>
      </div>
    </div> -->
    <!-- 波形绘制区域 -->
    <div class="pd recpower">
      <div style="height:40px;width:300px;background:#999;position:relative;">
        <div
          class="recpowerx"
          style="height:40px;background:#0B1;position:absolute;"
        ></div>
        <div
          class="recpowert"
          style="padding-left:50px; line-height:40px; position: relative;"
        ></div>
      </div>
    </div>
    <div class="pd waveBox">
      <div style="border:1px solid #ccc;display:inline-block">
        <div style="height:100px;width:300px;" class="recwave"></div>
      </div>
    </div>
    <button @click="recOpen">权限</button>
    <button @click="recStart">开始</button>
  </div>
</template>

<script>
import Recorder from 'recorder-core'
import 'recorder-core/src/extensions/frequency.histogram.view'
import 'recorder-core/src/extensions/lib.fft'
export default {
  data() {
    return {
      num: 100,
      Rec: Recorder,

      type: 'mp3',
      bitRate: 16,
      sampleRate: 16000,

      rec: 0,
      duration: 0,
      powerLevel: 0,

      recOpenDialogShow: 0,
      logs: [],
      dialogInt: null
    }
  },
  inject: ['uname'],
  computed: {
    show() {
      this.$nextTick(() => console.log(this.$refs.text))
      return this.num * 1
    }
  },
  methods: {
    fn() {
      this.num = 1
    },
    recOpen() {
      var This = this
      var rec = (this.rec = Recorder({
        type: This.type,
        bitRate: This.bitRate,
        sampleRate: This.sampleRate,
        onProcess: function(
          buffers,
          powerLevel,
          bufferDuration,
          bufferSampleRate,
          newBufferIdx,
          asyncEnd
        ) {
          // 分贝图
          document.querySelector('.recpowerx').style.width = powerLevel + '%'
          document.querySelector('.recpowert').innerText =
            bufferDuration + ' / ' + powerLevel

          This.wave.input(
            buffers[buffers.length - 1],
            powerLevel,
            bufferSampleRate
          )
        }
      }))
      This.createDelayDialog()
      rec.open(function() {
        This.dialogCancel()
        // 绘制图形函数
        This.wave = Recorder.FrequencyHistogramView({ elem: '.recwave' })
      })
    },
    recStart() {
      if (!this.rec) {
        return
      }
      this.rec.start()
    },
    dialogCancel() {
      clearTimeout(this.dialogInt)

      // 关闭弹框，应该使用自己的弹框方式
      var elems = document.querySelectorAll('.waitDialog')
      for (var i = 0; i < elems.length; i++) {
        elems[i].parentNode.removeChild(elems[i])
      }
    },
    createDelayDialog() {
      this.dialogInt = setTimeout(() => {
        // 定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况，在open前放置定时器利于收到了回调能及时取消（不管open是同步还是异步回调的）
        this.showDialog()
      }, 3000)
    },
    showDialog() {
      // if (!/mobile/i.test(navigator.userAgent)) {
      //   return // 只在移动端开启没有权限请求的检测
      // }
      this.dialogCancel()
      // 显示弹框，应该使用自己的弹框方式
      var div = document.createElement('div')
      document.body.appendChild(div)
      div.innerHTML =
        '' +
        '<div class="waitDialog" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">' +
        '<div style="display:flex;height:100%;align-items:center;">' +
        '<div style="flex:1;"></div>' +
        '<div style="width:240px;background:#fff;padding:15px 20px;border-radius: 10px;">' +
        '<div style="padding-bottom:10px;">录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~</div>' +
        '<div style="text-align:center;"><a onclick="waitDialogClick()" style="color:#0B1">忽略</a></div>' +
        '</div>' +
        '<div style="flex:1;"></div>' +
        '</div>' +
        '</div>'
    }
  }
}
</script>

<style lang="less" scoped></style>
